import { ProTable, ActionType } from '@ant-design/pro-components';
import React, { useRef } from 'react';
import { message, Space, Popconfirm, Button, Select, Modal } from 'antd';
import { useRequest } from 'ahooks';
import { carouselV1AdminControllerIndex, carouselV1AdminControllerDestroy, carouselV1AdminControllerUpdate } from '@/services/auto/carouselAdmin';
import { completeImgUrl } from "common/utils/utils";
import { getEnumWithSearch } from "@/utils/protable-column";
import Image from "@/components/Image";
import { BooleanNumber, CarouselPositionCode, carouselPositionCode } from "common/utils/data";
import Add from "./component/Add";

export default () => {
  const actionRef = useRef<ActionType>();

  const { runAsync: updateRun } = useRequest(carouselV1AdminControllerUpdate, {
    manual: true,
    onSuccess: () => {
      message.success('上架成功');
      actionRef.current?.reload();
    },
  });

  const { runAsync: deleteRun } = useRequest(carouselV1AdminControllerDestroy, {
    manual: true,
    onSuccess: () => {
      message.success('删除成功');
      actionRef.current?.reload();
    },
  });

  return (
    <>
      <ProTable<API.CarouselAdminIndexResult, API.CarouselV1AdminControllerIndexParams>
        actionRef={actionRef}
        rowKey="id"
        toolBarRender={() => [
          <Add key="add" reload={()=>{
            actionRef.current?.reload();
          }}>
            <Button type="primary">
              添加广告
            </Button>
          </Add>
        ]}
        request={(params) => {
          const {
            pageSize,
            current,
            title,
            status,
            positionCode,
          } = params;
          return carouselV1AdminControllerIndex({
            pageSize,
            pageIndex: current,
            title,
            positionCode,
            status,
          }).then((res) => {
            return {
              success: true,
              data: res.list,
              total: res.total,
            };
          });
        }}
        columns={[
          {
            title: '广告',
            key: 'imgUrl',
            render: (_, record)=>{
              return <Image src={completeImgUrl(record.img!)} style={{width: 300}}  />
            },
            search: false,
          },
          {
            title: '广告位',
            key: 'positionCode',
            renderFormItem: ()=>{
              return <Select
                options={carouselPositionCode.$listSelect.map(item=>{
                  return {
                    label: item.label.name,
                    value: item.value,
                  }
                })}
                allowClear
                placeholder="全部"
              />
            },
            renderText: (_,record)=>{
              return carouselPositionCode[record.positionCode as CarouselPositionCode].name;
            }
          },
          {
            title: '标题',
            dataIndex: 'title',
          },
          {
            title: '优先级',
            dataIndex: 'sort',
            search: false,
          },
          /*{
            title: '开始时间',
            valueType: 'dateTime',
            dataIndex: 'startDate',
            search: false,
          },
          {
            title: '结束时间',
            valueType: 'dateTime',
            dataIndex: 'endDate',
            search: false,
          },*/
          ...getEnumWithSearch({
            title: '广告状态',
            dataIndex: 'status',
            options: [
              {
                label: '启用',
                value: BooleanNumber.true,
              },
              {
                label: '禁用',
                value: BooleanNumber.false,
              }
            ]
          }),
          {
            align: 'center',
            title: '操作',
            key: 'option',
            valueType: 'option',
            width: 120,
            render: (_, record) => {
              return (
                <Space direction="vertical" size={0}>
                  <Add data={record} reload={()=>{
                    actionRef.current?.reload();
                  }}>
                    <Button type="link">
                      编辑
                    </Button>
                  </Add>
                  {
                    record.status === BooleanNumber.true ? <Popconfirm
                      title="下架后广告不再展示，确定下架当前广告？"
                      okText="确认下架"
                      onConfirm={() => {
                        return updateRun({uuid: record.uuid}, {status: BooleanNumber.false});
                      }}
                    >
                      <Button type="link">
                        下架
                      </Button>
                    </Popconfirm> : <Popconfirm
                      title="确定上架当前广告？"
                      okText="确认上架"
                      onConfirm={() => {
                        return updateRun({uuid: record.uuid}, {status: BooleanNumber.true});
                      }}
                    >
                      <Button type="link">
                        上架
                      </Button>
                    </Popconfirm>
                  }
                  <Button type="link" danger onClick={()=>{
                    Modal.confirm({
                      title: '删除后不可恢复，确定删除当前广告？',
                      onOk: ()=>{
                        return deleteRun({uuid: record.uuid});
                      }
                    })
                  }}>
                    删除
                  </Button>
                </Space>
              );
            },
          },
        ]}
      />
    </>
  );
};
